<!--# include virtual="/ceca_two/common/html/header.html"-->
<link rel="stylesheet" href="/ceca_two/css/software.css" />
<style>
	.money-list {
	    position: relative;
	    margin-left: 5px;
	    width: 120px;
	    padding-left: 10px;
	    height: 30px;
	    border: 1px solid #d9d9d9;
	    cursor: pointer;
	}
	.money-list span {
	    content: '';
	    width: 0;
	    height: 0;
	    border-style: solid dashed dashed;
	    border-color: #c2c2c2 transparent transparent;
	    overflow: hidden;
	    cursor: pointer;
	    transition: all .2s;
	    -webkit-transition: all .2s;
	    position: absolute;
	    top: 13px;
	    right: 5px;
	    border-width: 6px;
	}
	.money-list dl{
		border: 1px solid #d9d9d9;
	    display: none;
	    border-top: 0;
	    position: absolute;
	    width: 130px;
	    background: #fff;
	    top: 31px;
	    left: -1px;
	    /*height: 185px;*/
	    overflow: hidden;
	}
	.content-box .right-content .search-box .fl .area-list dl{
		height: initial;
	}
	.money-list dl dd{
		height: 30px;
	    padding-left: 10px;
	    border-bottom: 1px solid #d9d9d9;
	}
	.area-list dl dd{
		display: none;
	}
</style>
<!--banner-->
<!--# include virtual="/ceca_two/common/html/banner.html"-->
<!---->
<div class="content-box clearfloat">
	<!-- 导航树  -->
	<div class="nav-tree">
		<ul class="tit">
			全部
		</ul>
		<ul class="nav-list" id="softwareNav">
		<script type="text/html" id="menuItem">
			{{#  layui.each(d, function(index, item){ }}
				{{# if(item.categoryParantId != 0){  }}
					<li data-categoryId ="{{item.categoryId}}">{{item.categoryName}}</li>
				{{# } }}
			{{# }); }}
		</script>
		</ul>
	</div>
	<!--右侧列表-->
	<div class="right-content">
		<div class="search-box clearfloat">
			<ul class="fl">
				<li>地区：</li>
				<li class="area-list"><i>全国</i><span></span>
					<dl>
			    	<dd value='' name="全国">全国</dd>
					<dd value='北京'name="北京市">北京市</dd>
					<dd value='天津' name="天津市">天津市</dd>
					<dd value='河北' name="河北省">河北省</dd>
					<dd value='山西' name="山西省">山西省</dd>
					<dd value='内蒙古' name="内蒙古自治区">内蒙古自治区</dd>
					<dd value='辽宁' name="辽宁省">辽宁省</dd>
					<dd value='吉林' name="吉林省">吉林省</dd>
					<dd value='黑龙江' name="黑龙江省">黑龙江省</dd>
					<dd value='上海' name="上海市">上海市</dd>
					<dd value='江苏' name="江苏省">江苏省</dd>
					<dd value='浙江' name="浙江省">浙江省</dd>
					<dd value='安徽' name="安徽省">安徽省</dd>
					<dd value='福建' name="福建省">福建省</dd>
					<dd value='江西' name="江西省">江西省</dd>
					<dd value='山东' name="山东省">山东省</dd>
					<dd value='河南' name="河南省">河南省</dd>
					<dd value='湖北' name="湖北省">湖北省</dd>
					<dd value='湖南' name="湖南省">湖南省</dd>
					<dd value='广东' name="广东省">广东省</dd>
					<dd value='广西' name="广西壮族自治区">广西壮族自治区</dd>
					<dd value='海南' name="海南省">海南省</dd>
					<dd value='重庆' name="重庆市">重庆市</dd>
					<dd value='四川' name="四川省">四川省</dd>
					<dd value='贵州' name="贵州省">贵州省</dd>
					<dd value='云南' name="云南省">云南省</dd>
					<dd value='西藏' name="西藏自治区">西藏自治区</dd>
					<dd value='陕西' name="陕西省">陕西省</dd>
					<dd value='甘肃' name="甘肃省">甘肃省</dd>
					<dd value='青海' name="青海省">青海省</dd>
					<dd value='宁夏' name="宁夏回族自治区">宁夏回族自治区</dd>
					<dd value='新疆' name="新疆维吾尔自治区">新疆维吾尔自治区</dd>
					<dd value='台湾' name="台湾省">台湾省</dd>
					<dd value='澳门' name="澳门特别行政区">澳门特别行政区</dd>
					</dl>
				</li>
			</ul>
			<ul class="fl" style="margin-left: 50px;">
				<li>是否收费：</li>
				<li class="money-list"><i>全部</i><span></span>
					<dl> 
						<dd value="">全部</dd>
						<dd value="1">收费版</dd>
						<dd value="0">免费版</dd>
						<dd value="2">试用版</dd>
					</dl>
				</li>
			</ul>
			<ul class="fr">
				<input type="text"  name="key" id="key" placeholder="软件名称" class="text" />
				<input type="button"  value="搜索" class="btn" id="searchBtn" />
			</ul>
		</div>
		<div class="software-list" id="softwareListHtml">
			
		</div>
		<script type="text/html" id="softwareList">
			{{#  layui.each(d, function(index, item){ }}
				<div class="lift clearfloat">
					<div class="left">
						<img src="{{item.softwareLogo || '/ceca_two/img/software.jpg' }}  "/>
					</div>
					<div class="right">
						<ul class="title"><a target="_blank"  href = "/ceca_two/modules/software/details.html?softwareId={{item.softwareId}}">[{{#if(item.softwareArea&&(item.softwareArea.charAt(item.softwareArea.length-1)=="；")){}}{{item.softwareArea.substr("0",item.softwareArea.length-1).replace(/；/g,",")}}{{#}else if(item.softwareArea){}}{{item.softwareArea.replace(/；/g,",")}}{{#}}}]{{item.softwareName}}</a></ul>
						<ul class="info">
							<li title=""><span>软件分类 :</span>{{item.categoryName || ""}}</li>
							<li title=""><span>软件版本 :</span>{{item.version || ""}}</li>
							<li title=""><span>软件大小:</span>{{item.softwareSize || ""}}</li>
							<li title=""><span>适用地区:</span>{{#if(item.softwareArea&&(item.softwareArea.charAt(item.softwareArea.length-1)=="；")){}}{{item.softwareArea.substr("0",item.softwareArea.length-1).replace(/；/g,",")}}{{#}else if(item.softwareArea){}}{{item.softwareArea.replace(/；/g,",")}}{{#}}}</li>
							<li title="{{item.developmentUnit || ""}}"><span>开发单位:</span>{{item.developmentUnit || ""}}</li>
							<li title=""><span>软件售价:</span>{{item.softwarePrice || ""}}</li>
						</ul>
						<ul class="desc">
							{{item.abstract  || ""}}
						</ul>

					</div>
				</div>
			{{# }); }}
		</script>
		<div id="laypage"></div>
	</div>
</div>
<!--底部-->
<!--# include virtual="/ceca_two/common/html/footer.html"-->
</body>
</html>
<script type="text/javascript">

layui.use(['element','Router','Zutil','laytpl','laypage'], function(){
	var Zutil  = layui.Zutil;
	var Router = layui.Router;
	var laytpl = layui.laytpl;
	var laypage =layui.laypage;
	var Router = layui.Router;
	
	var obj = {
		categoryId:Zutil.getQueryString("categoryId" || ""),
		pageNumber:Zutil.getQueryString("pageNumber" ||1),
		pageSize: Zutil.getQueryString("pageSize"|| 10),
		softwareArea: Zutil.getQueryString("softwareArea" || ""),
		isFree: Zutil.getQueryString("isFree"|| "")
	};
	
	var nowCity =sessionStorage.getItem("nowCity");
	
	if(nowCity == null || nowCity == "null"){
		$.getJSON("http://restapi.amap.com/v3/ip?key=6a0ef5788c9d08d8e06effc034904740", function(result){
			if(result && result.status) {
				$(".area-list i").html(result.city);
				obj.softwareArea = nowCity.city || "" ;
				sessionStorage.setItem("nowCity",JSON.stringify(result));
			}
		});
	}else{
		nowCity =  jQuery.parseJSON(nowCity);
		$(".area-list i").html(nowCity.city);
		obj.softwareArea = nowCity.city || "" ;
	}
	
	if(Zutil.getQueryString("key"))obj.key =  Zutil.decodeURI(window.atob(Zutil.getQueryString("key")  || ""));
	if(Zutil.getQueryString("softwareArea")){
		$(".area-list i").html(Zutil.decodeURI(window.atob(Zutil.getQueryString("softwareArea")  || "")));
		obj.softwareArea =  Zutil.decodeURI(window.atob(Zutil.getQueryString("softwareArea")  || ""));
	}
	$("#key").val(obj.key);
	$(".money-list>i").html($(".money-list dl dd[value*='"+obj.isFree+"']").html()).attr("value",$(".money-list dl dd[value*='"+obj.isFree+"']").attr("value"));
	if(obj.softwareArea) $(".area-list>i").html($(".area-list dl dd[name*='"+obj.softwareArea+"']").html()).attr("value",$(".area-list dl dd[name*='"+obj.softwareArea+"']").attr("value")).attr("name",$(".area-list dl dd[name*='"+obj.softwareArea+"']").attr("name"));
	var navtree = {};
	
	if((Zutil.decodeURI(window.atob(Zutil.getQueryString("softwareArea")))=="全国")){
		$(".area-list i").html("全国");
		obj.softwareArea="";
	}

	function makeUrl(pageNumber,pageSize){
		var searchUrl = window.location.pathname+"?";
        obj.categoryId ? searchUrl+="&categoryId="+obj.categoryId : "" ;
		obj.pageNumber ? searchUrl+="&pageNumber="+obj.pageNumber : "" ;
		obj.pageSize ? searchUrl+="&pageSize="+obj.pageSize : "" ;
		obj.softwareArea ? searchUrl+="&softwareArea="+window.btoa(Zutil.encodeURI(obj.softwareArea || "")) : "" ;
		obj.isFree ? searchUrl+="&isFree="+obj.isFree : "" ;
		if ($("#key").val()) {
			obj.key = stripscript($("#key").val());
			searchUrl+="&key="+window.btoa(Zutil.encodeURI(obj.key || ""));
		}
		window.location.href=searchUrl;
	}
	
	function getNavTree(){
		var softwareCategory  =sessionStorage.getItem("softwareCategory");
 		if(softwareCategory == null || softwareCategory == "null"){
 			var getCategory = Router.link.software.getCategory;
			$.post(getCategory,data,function(result){
				laytpl(menuItem.innerHTML).render(result.data, function(html){
					softwareNav.innerHTML = html;
				});
				sessionStorage.setItem("softwareCategory",JSON.stringify(result.data));
				$(".nav-list li").on("click",function (){
					$(this).addClass("active").siblings().removeClass("active");
					var thisCategoryId = $(this).attr("data-categoryId");
//					window.location.href = "/ceca_two/modules/software/software.html?categoryId="+thisCategoryId ;
				})
				for ( i = 0 ; i < $("#softwareNav li").length ; i++) {
					if (Zutil.getQueryString("categoryId") == $("#softwareNav li").eq(i).attr("data-categoryId")) {
						$("#softwareNav li").eq(i).addClass("active")
					}
				}
			});
 		}else{
 			var data = JSON.parse(softwareCategory);    
 			laytpl(menuItem.innerHTML).render(data, function(html){
				softwareNav.innerHTML = html;
			});
			$(".nav-list li").on("click",function (){
				$(this).addClass("active").siblings().removeClass("active");
				var thisCategoryId = $(this).attr("data-categoryId");
				if(!thisCategoryId)return false;
				obj.categoryId = thisCategoryId ;
				makeUrl();
			})
			for ( i = 0 ; i < $("#softwareNav li").length ; i++) {
				if (obj.categoryId == $("#softwareNav li").eq(i).attr("data-categoryId")) {
					$("#softwareNav li").eq(i).addClass("active")
				}
			}
 		}
	}

	function getList(){
		var search = Router.link.software.search ;
		if(Zutil.getQueryString("softwareId"))return false;
		$.post(search,obj,function(result){
			var  data = result.data;
			var areaArr=result.ext;
			setAreaHtml(areaArr);
			laytpl(softwareList.innerHTML).render(data.list, function(html){	
				$("#softwareListHtml").html(html);
			});
			laypage({
			    cont: 'laypage'
			    ,pages: data.totalPage
			    ,curr:data.pageNumber
			    ,groups:data.pageSize
			    ,skin: '#ff0000'
			    ,jump: function(opt, first){
				    var curr = opt.curr;   //得到了当前页，用于向服务端请求对应数据
				    obj.pageNumber = curr|| 1;
				    obj.pageSize = data.pageSize|| 10;
				    if($(".area-list>i").attr("name")=="全国"){
						obj.softwareArea =  "全国";
					}
				    if(!first)makeUrl(obj.pageNumber,obj.pageSize);
				  }
			});
		});
	}
	
	
	function setAreaHtml(areaArr){
		$(".area-list dl dd").hide();
		$(".area-list dl dd[name='全国']").show();
		if(!areaArr)return;
		areaArr=areaArr["softwareArea"];
		if(!areaArr)return;
		var temp;
		for(var i=0;i<areaArr.length;i++){
			temp=areaArr[i].split("；");
			for(var j=0;j<temp.length;j++){
				$(".area-list dl dd[name*="+temp[j]+"]").show();
			}
			
		}
	}
	
	$("#searchBtn").on("click",function (){
		var search = {};
		obj.key = stripscript($("#key").val());
		delete obj.pageNumber ;
		delete obj.pageSize ;
		makeUrl();
	})
	
	$(document).on("click",".area-list,.money-list",function (){
		$(this).find("span").toggleClass("more");
		$(this).find("dl").slideToggle();
	});
	$(document).on("click",".area-list dd",function (){
		var areaStr=$(this).attr("value");
		var moneyStr=$(".money-list>i").attr("value");
		obj = {};
		var navtree = {};
		
		Zutil.getQueryString("categoryId") ? obj.categoryId = Zutil.getQueryString("categoryId") : "" ;
		obj.pageNumber = 1 ;
		obj.pageSize = 10 ;
		Zutil.getQueryString("key") ? obj.key =  Zutil.getQueryString("key") : "" ;
		if(areaStr){
			obj.softwareArea =  areaStr;
		}else if($(this).attr("name")=="全国"){
			obj.softwareArea =  "全国";
		}
		if(moneyStr){
			obj.isFree =  moneyStr;
		}
		$(this).parents(".area-list").find("i").attr("value",areaStr).attr("name",$(this).attr("name")).html($(this).html());
		makeUrl();
	});
	$(".money-list dd").on("click",function (){
		var areaStr=$(".area-list>i").attr("value");
		var moneyStr=$(this).attr("value");
		obj = {};
		Zutil.getQueryString("categoryId") ? obj.categoryId = Zutil.getQueryString("categoryId") : "" ;
		obj.pageNumber = 1 ;
		obj.pageSize = 10 ;
		Zutil.getQueryString("key") ? obj.key =  Zutil.getQueryString("key") : "" ;
		if(areaStr){
			obj.softwareArea =  areaStr;
		}else if($(".area-list>i").attr("name")=="全国"){
			obj.softwareArea =  "全国";
		}
		if(moneyStr){
			obj.isFree =  moneyStr;
		}
		$(this).parents(".money-list").find("i").attr("value",moneyStr).html($(this).html());
		makeUrl();
	});
	
	$(".nav-tree .tit").on("click",function (){
		window.location.href = "/ceca_two/modules/software/software.html";
	});
	
	getList();
	getNavTree();
	
	
	function stripscript (s) { 
		var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]") 
		var rs = ""; 
		for (var i = 0; i < s.length; i++) { 
			rs = rs+s.substr(i, 1).replace(pattern, ''); 
		} 
		return rs; 
	} 
	
	
});
</script>